<ion-content>
  <ion-grid *ngIf="!loading">
    <ion-row class="ion-align-items-center">
      <ion-col class="ion-text-center">
        <div style="padding-bottom: 32px">
          <img
            src="assets/img/icon.png"
            class="pb-1"
            style="max-width: 100px"
          />
        </div>
        <ion-card color="dark">
          <ion-card-header style="padding-bottom: 0">
            <ion-button
              *ngIf="swiper?.activeIndex === 1"
              class="back-button"
              fill="clear"
              color="light"
              (click)="previous()"
            >
              <ion-icon slot="icon-only" name="arrow-back"></ion-icon>
            </ion-button>
            <ion-card-title>
              {{ swiper?.activeIndex === 0 ? 'StartOS Setup' : 'Recover Options'
              }}
            </ion-card-title>
          </ion-card-header>
          <ion-card-content class="ion-margin-bottom">
            <swiper
              [autoHeight]="true"
              [observeParents]="true"
              (swiper)="setSwiperInstance($event)"
            >
              <!-- SLIDE 1 -->
              <ng-template swiperSlide>
                <!-- fresh -->
                <ion-item
                  button
                  [disabled]="error"
                  detail="false"
                  lines="none"
                  routerLink="/storage"
                >
                  <ion-icon slot="start" name="add"></ion-icon>
                  <ion-label>
                    <h2><ion-text color="success">Start Fresh</ion-text></h2>
                    <p>Get started with a brand new Start9 server</p>
                  </ion-label>
                </ion-item>

                <!-- recover -->
                <ion-item
                  button
                  [disabled]="error"
                  detail="false"
                  lines="none"
                  (click)="next()"
                >
                  <ion-icon slot="start" name="reload"></ion-icon>
                  <ion-label>
                    <h2><ion-text color="danger">Recover</ion-text></h2>
                    <p>Recover, restore, or transfer StartOS data</p>
                  </ion-label>
                </ion-item>
              </ng-template>

              <!-- SLIDE 2 -->
              <ng-template swiperSlide>
                <!-- attach -->
                <ion-item
                  button
                  detail="false"
                  lines="none"
                  routerLink="/attach"
                >
                  <ion-icon slot="start" name="cube-outline"></ion-icon>
                  <ion-label>
                    <h2>
                      <ion-text color="success">Use Existing Drive</ion-text>
                    </h2>
                    <p>Attach an existing StartOS data drive (not a backup)</p>
                  </ion-label>
                </ion-item>

                <!-- transfer -->
                <ion-item
                  button
                  detail="false"
                  lines="none"
                  routerLink="/transfer"
                >
                  <ion-icon slot="start" name="share-outline"></ion-icon>
                  <ion-label>
                    <h2>
                      <ion-text color="primary">Transfer</ion-text>
                    </h2>
                    <p>
                      Transfer data from an existing StartOS data drive (not a
                      backup) to a new, preferred drive
                      <br />
                    </p>
                  </ion-label>
                </ion-item>

                <!-- restore from backup -->
                <ion-item
                  button
                  lines="none"
                  detail="false"
                  routerLink="/recover"
                >
                  <ion-icon slot="start" name="save-outline"></ion-icon>
                  <ion-label>
                    <h2>
                      <ion-text color="warning">
                        Restore From Backup (Disaster Recovery)
                      </ion-text>
                    </h2>
                    <p>Restore StartOS data from an encrypted backup</p>
                  </ion-label>
                </ion-item>
              </ng-template>
            </swiper>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>
